<!--
 * @Author: your name
 * @Date: 2021-06-13 22:26:39
 * @LastEditTime: 2022-05-15 16:21:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \lix-vue2-demos\src\views\demo\style\SelfAdaptionLayout.vue
-->

<template>
  <div>
    <h1>使用媒体查询，窗口大于700px，显示蓝色，否则显示红色</h1>
    <div class="box"></div>
    <h1>根据窗口宽度调整一行显示个数，使用媒体查询</h1>
    <div class="box1">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <h1>flex 布局 flex-grow flex-shrink</h1>
    <div class="flex-box">
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ex-adaption'
}
</script>
<style lang="less" scoped></style>
<style scoped>
/* ================================ */
.flex-box {
  display: flex;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
.flex-box div {
  width: 300px;
  height: 200px;
}

.flex-box div:nth-child(1) {
  background-color: blue;
  flex-basis: 100px;
  flex-grow: 1; /* 实际宽度：flex-basis(or)width + (剩余的部分)/(sum(flex-grow))*flex-grow */
  flex-shrink: 1;
}

.flex-box div:nth-child(2) {
  background-color: red;
  flex-basis: 200px;
  flex-grow: 3; /* 实际宽度：200 + (400-300)/2*3 */
  flex-shrink: 3; /* 实际宽度：flex-basis(or)width - (超过的部分)/(sum(flex-shrink))*flex-shrink */
}
/* ================================ */
.box {
  width: 100px;
  height: 100px;
}

@media screen and (min-width: 500px) and (max-width: 700px) {
  div.box {
    background-color: red;
  }
}
@media screen and (min-width: 701px) {
  div.box {
    background-color: blue;
  }
}
/* ================================ */
.box1 {
  width: 100%;
}
.box1::after {
  content: '';
  display: block;
  clear: both;
}
.box1 div {
  float: left;
  height: 100px;
}
.box1 div:nth-child(1) {
  background-color: red;
}
.box1 div:nth-child(2) {
  background-color: blue;
}
.box1 div:nth-child(3) {
  background-color: green;
}
@media screen and (min-width: 641px) {
  .box1 div {
    width: 33.3%;
  }
}
@media screen and (min-width: 376px) and (max-width: 640px) {
  .box1 div {
    width: 50%;
  }
}
@media screen and (min-width: 100px) and (max-width: 375px) {
  .box1 div {
    width: 100%;
  }
}
/* ================================ */
</style>
